<template>
  <section class="component iou-information" ref="iou-information">
    <ul>
      <li
        v-for="(item, index) in caseNumberList"
        :key="item"
        @click="onClick(item, index)"
        class="caseNumber-title"
      >
        {{ item }}
      </li>
    </ul>
    <div class="title">基本信息</div>
    <el-row>
      <el-col :span="8">
        <span>借据号：</span>
        <span>{{ model.loanNo }}</span>
      </el-col>
      <el-col :span="8">
        <span>入催原因：</span>
        <span>{{ model.reasonCode | dictConvert("ReasonCode") }}</span>
      </el-col>
      <el-col :span="8">
        <span>授信合同编号：</span>
        <span>{{ model.contractNumber }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>用户编号：</span>
        <span>{{ model.userNo }}</span>
      </el-col>
      <el-col :span="8">
        <span>客户编号：</span>
        <span>{{ model.personalNo }}</span>
      </el-col>
      <el-col :span="8">
        <span>产品编号：</span>
        <span>{{ model.productNo }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>产品版本号：</span>
        <span>{{ model.productVersion }}</span>
      </el-col>
      <el-col :span="8">
        <span>贷款日期：</span>
        <span>{{ model.loanDate | dateFormat }}</span>
      </el-col>
      <el-col :span="8">
        <span>贷款本金：</span>
        <span>{{ model.loanCapital && `${model.loanCapital}元` }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>贷款总期数：</span>
        <span>{{ model.totalPeriods }}</span>
      </el-col>
      <el-col :span="8">
        <span>贷款期限：</span>
        <span>{{ model.loanTerm }}</span>
      </el-col>
      <el-col :span="8">
        <span>未还本金：</span>
        <span>{{ model.noRepayCapital && `${model.noRepayCapital}元` }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>已还本金：</span>
        <span>{{ model.repaidCapital && `${model.repaidCapital}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>还款方式：</span>
        <span>{{ model.repayType | dictConvert("RepayType")}}</span>
      </el-col>
      <el-col :span="8">
        <span>借款用途：</span>
         <span>{{ model.loanUse }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>借据状态：</span>
        <span>{{ model.loanStatus | dictConvert("LoanStatus")}}</span>
      </el-col>
    </el-row>
    <div class="title">逾期消息</div>
    <el-row>
      <el-col :span="8">
        <span>逾期金额：</span>
        <span>{{ model.overdueAmount && `${model.overdueAmount}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期期数：</span>
        <span>{{ model.overduePeriod }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期天数：</span>
        <span>{{ model.overdueDays }}</span>
      </el-col>
    </el-row>
    <el-row>
      <!-- <el-col :span="8">
        <span>账户总金额：</span>
        <span>{{ model.caseMoney && `${model.caseMoney}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>账户最低应还金额：</span>
        <span>{{
          model.minShouldRepayAmount && `${model.minShouldRepayAmount}元`
        }}</span>
      </el-col>
      <el-col :span="8">
        <span>账户逾期最低应还金额：</span>
        <span>{{
          model.minOverdueAmount && `${model.minOverdueAmount}元`
        }}</span>
      </el-col> -->
      <el-col :span="8">
        <span>借据总金额：</span>
        <span>{{ model.loanMoney && `${model.loanMoney}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>借据最低应还金额：</span>
        <span>{{
          model.minShouldRepayAmount && `${model.minShouldRepayAmount}元`
        }}</span>
      </el-col>
      <el-col :span="8">
        <span>借据逾期最低应还金额：</span>
        <span>{{
          model.minOverdueAmount && `${model.minOverdueAmount}元`
        }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>逾期明细-本金：</span>
        <span>{{ model.overdueCapital && `${model.overdueCapital}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期明细-利息：</span>
        <span>{{ model.overdueInterest && `${model.overdueInterest}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期明细-罚息：</span>
        <span>{{ model.overdueFine && `${model.overdueFine}元` }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>逾期明细-复利：</span>
        <span>{{ model.overdueCompound && `${model.overdueCompound}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期明细-其他费用：</span>
        <span>{{ model.overdueOtherFee && `${model.overdueOtherFee}元` }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>M0账户总金额：</span>
        <span>{{ model.m0Amount && `${model.m0Amount}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期1-30天金额：</span>
        <span>{{ model.m1Amount && `${model.m1Amount}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期31-60天金额：</span>
        <span>{{ model.m2Amount && `${model.m2Amount}元` }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>逾期61-90天金额：</span>
        <span>{{ model.m3Amount && `${model.m3Amount}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期91-120天金额：</span>
        <span>{{ model.m4Amount && `${model.m4Amount}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期121-150天金额：</span>
        <span>{{ model.m5Amount && `${model.m5Amount}元` }}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <span>逾期151-180天金额：</span>
        <span>{{ model.m6Amount && `${model.m6Amount}元` }}</span>
      </el-col>
      <el-col :span="8">
        <span>逾期180天以上：</span>
        <span>{{ model.afterM6Amount && `${model.afterM6Amount}元` }}</span>
      </el-col>
    </el-row>
    <div class="operate-buttons">
      <el-button @click="emitClose">关闭</el-button>
    </div>
  </section>
</template>
<script lang="ts">
import { namespace } from "vuex-class";
import { Vue, Component, Emit } from "vue-property-decorator";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { Dependencies } from "~/core/decorator";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class IouInformation extends Vue {
  @CollectionExecutionModule.State private caseNo;

  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  private caseNumberList: any = [];
  private model: any = {};
  @Emit("close") private emitClose() {}

  private onClick(item, index) {
    this.refreshData({ caseNumber: this.caseNo, loanNo: [item] });
    this.styleChange(index);
  }

  private refreshData(params) {
    this.caseOperatorPageService.queryLoanInfo(params).subscribe(data => {
      this.model = data;
      this.caseNumberList = data.loanNos;
    });
  }

  private styleChange(index) {
    const box = this.$refs["iou-information"] as Element;
    const span: any = box.getElementsByClassName("caseNumber-title");
    for (const item of span) {
      item.classList.remove("active");
    }
    span[index].classList.add("active");
  }
}
</script>
<style lang="less" scoped>
.component.iou-information {
  ul {
    padding: 0 0 20px 0;
    margin: 0;
    display: flex;

    font-size: 15px;
    font-weight: bold;
    li {
      margin-right: 15px;
      list-style: none;
      cursor: pointer;
    }
    .active {
      color: #409eff;
    }
  }
  .title {
    font-weight: bold;
    padding-bottom: 15px;
  }
  .el-row {
    padding-bottom: 10px;
  }
}
</style>
